<template>
  <div>
    <!--ref可以对表单进行关联，ref="myBrandForm" 就是将当前的表单进行关联-->
    <!--注意:由于vue的不支持，在进行ref的时候需要将MyBrandForm的大写M改为小写的m-->
    <v-form v-model="valid" ref="myBrandForm">
      <v-text-field
        v-model="brand.name"
        :counter="10"
        label="请输入品牌名称"
        :rules="nameRules"
        required
      ></v-text-field>
      <v-text-field
        v-model="brand.letter"
        label="请输入品牌首字母"
        :rules="letterRules"
        required
      ></v-text-field>
      <!--自定义下拉列表-->
      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        label="请选择商品分类"/>
    </v-form>
    <!--文件图片上传组件-->
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌LOGO：</span>
      </v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/upload/image"
          :multiple="false"
          :pic-width="250"
          :pic-height="90"
        />
      </v-flex>
    </v-layout>

    <!--空间隔离组件-->
    <v-spacer></v-spacer>
    <v-btn color="warning" @click="clear">重置</v-btn>
    <v-btn color="info" @click="submit">提交</v-btn>
  </div>
</template>

<script>
    export default {
      name: "my-brand-form",
      data(){
        return{
          brand:{
            name:"",
            letter:"",
            categories:[],
            image:""
          },
          // 品牌校验的结果标识，默认为false,不通过
          valid:false,
          // 非空校验判断
          nameRules:[
            v => !!v || "品牌名称不能为空",
            v => v.length > 1 || "品牌名称至少2位"
          ],
          letterRules:[
            v => !!v || "首字母不能为空",
            v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
          ],
        }
      },
      methods:{
        //重置表单，清空表单的数据
        clear(){
          console.log(this);

          //调用当前表单的reset(), 进行表单的清空
          //找到当前对象所绑定的所有关系并且从中找到对应的绑定，调其方法
          this.$refs.myBrandForm.reset();
          //关于数组对象清空的bug
          this.brand.categories = [];

          //console.log(this);

          //清空表单数据  方法：
          /*this.brand.name = "";
          this.brand.letter = "";
          this.brand.categories = [];*/
        },
        //提交表单
        submit(){
          //console.log(this);
          //在对于vue的前端页面进行谷歌浏览器调式的时候，可以使用debugger，进行断点调试
          //debugger

          if (this.$refs.myBrandForm.validate()) {

            //this.$message.info("表单校验通过");
         // debugger
            //品牌和商品分类的中间表只保存id,categories有id以及对象数组，需要取出id
            //通过解构表达式去获取brand的值
            let {categories,...others} = this.brand;
          //categories = (3) [{…}, {…}, {…}, __ob__: Observer], others = {name: "AAA",letter:"A"}
          //categories  有三个数组Array(3)  0 1 2  每个数组的元素为id和name,值为空
          //others   只有两个元素，letter和name    name: "AAA",letter:"A"
          //debugger
            //取出categories的id，通过map集合将取出的id变为id数组
            categories = categories.map(category=>category.id);
          //categories = (3) [127, 8, 151]
         /*   categories: Array(3)
            0: 127
            1: 8
            2: 151
            length: 3  */
            //others   只有两个元素，letter和name    name: "AAA",letter:"A"
            //join 拼接字符串  将categories的数组进行拼接为字符串
            //debugger
            others.cids = categories.join();
          //others = {name: "AAA", letter: "A"}, categories = (3) [127, 8, 151]
           /* categories: Array(3)
            0: 127
            1: 8
            2: 151
            length: 3*/
           /* others:
              letter: "A"
            name: "AAA"*/
            //发送ajax请求到后台，ajax从前台发送后台的数据只能是xml、json以及普通文本,不能够传对象
            //vue不支持发送ajax请求，需要用到axios，实现异步查询发送数据，发送ajax到后台
            //this.$http.post("/item/brand",this.brand)
            //将数组转为字符串进行 ajax从前台到后台的数据传递，不传对象，传字符串
            //使用qs工具请求参数字符串，通过stringify将Object转为QueryString
            this.$http.post("/item/brand",this.$qs.stringify(others))
            //others = {name: "AAA", letter: "A", cids: "127,8,151"}, categories = (3) [127, 8, 151]
           /* categories: Array(3)
            0: 127
            1: 8
            2: 151
            length: 3*/
           /* others:
              cids: "127,8,151"
            letter: "A"
            name: "AAA"*/

            //.then  成功后调用
              .then(resp => {
                this.$message.success("新增品牌成功");
                //品牌新增成功后关闭窗口,关闭新增窗口
                //子组件可以使用$emit 触发父组件定义的方法，自定义的事件
                this.$emit("close");
                // .catch   失败后调用
              }).catch(resp => {
              this.$message.error("新增品牌失败");
            })

          /*this.$http.post("/item/brand",this.brand)

            .then(resp=>{
              this.$message.info("新增品牌成功");
            }).catch(resp=>{
              this.$message.error("新增品牌失败");
          })*/

          }else
            {
              this.$message.error("表单校验不通过");
            }
          }
        }
      }
</script>

<style scoped>

</style>
